<template>
  <i :class="classObj" :style="styleObj" class="m-iconfont" />
</template>

<script>
const VALIDATED_CLASSIFY = ['m-pc-menu', 'm-pc-other', 'm-pc-public'];
export default {
  name: 'MIconfont',
  inheritAttrs: false,
  props: {
    classify: {
      type: String,
      default: '',
    },
    icon: {
      type: String,
      default: '',
    },
    size: {
      type: String,
      default: '16',
    },
    color: {
      type: String,
      default: '',
    },
  },
  computed: {
    styleObj() {
      return {
        color: this.color,
        fontSize: `${this.size}px`,
      };
    },
    classObj() {
      if (this.classify) {
        return [this.classify, this.icon];
      }
      const flag = VALIDATED_CLASSIFY.includes((this.icon || '').split('_')[0]);
      if (flag) {
        return [this.icon.split('_')[0], this.icon];
      }
      return ['iconfont', this.icon];
    },
  },
};
</script>
